<template>
    <div>
        <h4>子组件</h4>
        <p>父组件传过来的ccc：{{ ccc }}</p>
        <button @click="emit_ccc">1111</button>
        <hr />

        <h5>ref 获取 dom</h5>
        <div>
            <input type="text" ref="input_ref" />
        </div>
        <hr />
    </div>
</template>

<script lang="">
	import { defineComponent, ref, reactive, onMounted } from 'vue'
	export default defineComponent({
		props: ['ccc'],
		setup(props, context){
			// props：父组件传过来并且被接收到的数据
			console.log( props )
			
			// context
			// context.attrs：父组件传过来，没有在 props 中被接收的数据
			console.log( context.attrs );
				
			// context.emit：子组件向父组件传参
			function emit_ccc(){
				context.emit('get_ccc', 10)
			}
			
			// 
			const input_ref = ref(null)
			onMounted(()=>{
				console.log( input_ref.value );
				input_ref.value && input_ref.value.focus()
			})
			return {
				input_ref,
				emit_ccc,
			}
		},
	})
</script>

<style lang="scss" scoped>
</style>
